<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/leader/notices'}">学院领导</el-breadcrumb-item>
      <el-breadcrumb-item>已审核记录查询</el-breadcrumb-item>
      <el-breadcrumb-item>已审核课题查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--表格区域-->
      <el-table :data="checkedScoreList" stripe style="width:1140px;margin:0 5px">
        <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
        <el-table-column align="center" label="学生"  width="160">
          <template slot-scope="scope">
            <el-tag>{{scope.row.stu.name}} ({{scope.row.stu.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导老师"  width="160">
          <template slot-scope="scope">
            <el-tag>{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导成绩" prop="score.guideScore" width="100"></el-table-column>
        <el-table-column align="center" label="互评成绩" prop="score.commentScore" width="100"></el-table-column>
        <el-table-column align="center" label="答辩成绩" prop="score.replyScore" width="100"></el-table-column>  
        <el-table-column align="center" label="审核结果" width="200"> 
          <template slot-scope="scope">
            <el-tag :type="statusObj[scope.row.score.status].type">{{statusObj[scope.row.score.status].label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="教师评语/审核意见/撤销" width="200">
          <template slot-scope="scope">
            <el-popover placement="top" width="250px" trigger="click" :content="scope.row.score.teacherAdvice">
              <el-button slot="reference" type="info" circle icon="el-icon-view"></el-button>
            </el-popover> 
            <el-popover placement="top" width="250px" trigger="click" :content="scope.row.score.checkAdvice" style="margin-left:20px">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            <el-button style="margin-left:20px" type="danger" @click="cancelChecked(scope.row.score.id)" circle icon="el-icon-delete"></el-button> 
          </template>
        </el-table-column> 
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
  import {getLeaderCheckedScoreListByPage, getLeaderCheckedScoreTotal, leaderCancelCheckedScoreById} from '../../axios/score' 
  export default {
    name: 'LeaderCheckedScore',
    data(){
      return {
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有已审核的成绩列表的总数  
        checkedScoreList: [], // 已审核的成绩列表 
        statusObj:{ 
          4: { type: 'success', label: '审核通过' },
          3: { type: 'danger',  label: '审核不通过' }
        }
      }
    },
    created(){
      this.getCheckedScoreList()
      this.getCheckedScoreTotal()
    },
    methods: {
      getCheckedScoreTotal(){
        getLeaderCheckedScoreTotal().then(res => {
          if(res.success){
            this.total = res.data
          } 
        }) 
      },
       // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCheckedScoreList()  
      },
      cancelChecked(ScoreId){
        this.$confirm('确认撤销该条审核记录吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 向后端发送请求，删除信息
          leaderCancelCheckedScoreById(ScoreId).then(res => {
            if(res.success){
              this.$message.success('撤销成功!')
              this.pageParam.currentPage = 1
              this.getCheckedScoreList()
              this.getCheckedScoreTotal()
            }
          })
        }).catch(() => {
          this.$message.info('已取消提交!')
        }) 
      },
      // 获取已审核的课题列表
      getCheckedScoreList(){
        // 向后端发送请求，获取需要审核的课题列表
        getLeaderCheckedScoreListByPage(this.pageParam).then(res => {
          if(res.success){
            this.checkedScoreList = res.data
          } 
        }) 
        // // 无后端，模拟数据
        // this.checkedScoreList = [
        //   {
        //     stu: {id: 6109118001, name: '张三'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
        //     score: { // 对应毕设课题
        //           id:1,
        //           stuId: 6109118001, 
        //           teaId: 610911, 
        //           status:2,
        //           guideScore: 80, // 指导成绩
        //           commentScore: 85,
        //           replyScore: 90, // 答辩成绩
        //           teacherAdvise: '我是测试评论我是测试评论', // 教师评语
        //           checkAdvice: 'checkAdvice'
        //         } 
        //   }
        // ]
      },
    }
  }
</script>

<style>

</style>